<template>

	<scroll-view style="height: 100vh;" scroll-y="true" 
	    refresher-enabled="true" 
		:refresher-triggered="triggered"
		:refresher-threshold="100" 
		refresher-background="#5ca45b" 
		@refresherrefresh="onRefresh" 
		@scrolltolower="scrolltolower">
		<view class="list-content">
			
			<SearchInput @search="searchQuery"></SearchInput>
			
			<Tab :cate-list="categoryList" @bar="clickBar"></Tab>

			<!-- list -->
			<view class="list-wrap">
				<ListItem v-for="item in list" :key="item.id" :itemData="item"></ListItem>
			</view>
		</view>
	</scroll-view>


</template>

<script>
	import SearchInput from "./components/searcb-input.vue"
	import Tab from "./components/tab.vue"
	import ListItem from "./components/list-item.vue"
	// API
	import {
		listGoodsListApi
	} from "@/http/goods.js"
	import {
		getCategoryListApi
	} from "@/http/category.js"
	
	// 防抖定时器
	let Time = null;

	export default {
		data() {
			return {
				triggered: false,
				categoryList:[],
				goodsQuery: {
					page: 0,
					pageSize: 6,
					categoryId: null,
					queryWord:null,
					sort:0,
					priceSort:1
				},
				total: 0,
				list: []
			}
		},
		components: {
			SearchInput,
			Tab,
			ListItem
		},
		onLoad(e) {
			console.log(e.id);
			this.queryGoodsList();
			this.getCategoryList();
		},
		methods: {
			// 获取分类数据
			async getCategoryList(){
			  const list = await getCategoryListApi();
			  this.categoryList = list;
			},
			
			// 获取商品列表数据
			async queryGoodsList() {
				const res = await listGoodsListApi(this.goodsQuery);
				this.list = res.records;
				this.total = res.total;
			},
			
			//  修改查询, 排序规则, 重新加载数据
			clickBar(sortTtpe, priceSort, categoryId){
				// 0 分类 1 销量 2  阅读量 3 价格
				this.goodsQuery.sort = sortTtpe;
				this.goodsQuery.priceSort = priceSort;
				this.goodsQuery.categoryId = categoryId;
				this.goodsQuery.page = 0;
				this.list = [];
			    this.queryGoodsList();
			},
			
			// 搜索
			searchQuery(queryWord){
				this.goodsQuery.queryWord = queryWord;
				this.goodsQuery.page = 0;
				this.list = [];
			    this.queryGoodsList();
			},
			

			// 触底
			scrolltolower() {
				// 防抖
				if (Time) return;
				if (this.total <= this.goodsQuery.page + this.goodsQuery.pageSize) return
				Time = setTimeout(async () => {
					this.goodsQuery.page = this.goodsQuery.pageSize + this.goodsQuery.page;
					const {
						records
					} = await listGoodsListApi(this.goodsQuery);
					this.list = [...this.list, ...records];
					Time = null
				}, 500)
			},

			// 下拉刷新
			onRefresh() {
				// 防抖
				if (Time) return;
				// 重新加载数据
				this.list = [];
				this.goodsQuery = {
					page: 0,
					pageSize: 6,
					categoryUd: null,
					queryWord:"",
					sort:0,
					priceSort:0
				},
				this.triggered = true;
				Time = setTimeout(async () => {
					this.queryGoodsList();
					Time = null;
					this.triggered = false;
				}, 500)
			}
		}
	}
</script>

<style lang="less" scoped>
	.list-content {
		background-color: #fbf9ec;
		min-height: 100vh;


		.list-wrap {
			padding: 10rpx 30rpx;




		}
	}
</style>